<div class="p-2 mb-1">

  <div class="d-flex justify-content-center align-items-baseline info-panel-header card-shadow">
    <span>Task Runtimes</span>
  </div>

  <table class="table table-sm table-hover mt-2">
    <thead>
    <tr>
      <th><input type="search" class="form-control form-control-sm" placeholder="Filter by task name or ID" [(ngModel)]="filter" /></th>
      <th [ngClass]="getSortClass(STARTED_AT_RELATIVE)" (click)="sortBy(STARTED_AT_RELATIVE)">Timespan</th>
      <th [ngClass]="getSortClass(DURATION_SEC)" (click)="sortBy(DURATION_SEC)">Runtime</th>
    </tr>
    </thead>
    <tr *ngFor="let task of graphModel | search:filter:'name,id'; trackBy: trackByTaskId">

      <td class="task-name">
        <div class="text-ellipsis task-name-container">
          <i class="fa" [ngClass]="task.state"></i>
          <a [routerLink]="['tasks', task.id]"
             [title]="task.name + ' (' + task.id + ')'">{{task.name}}</a>
        </div>
      </td>

      <td [ngbPopover]="runtimeTooltip" container="body" triggers="mouseenter:mouseleave">
        <div class="stackedBarChart">
          <ng-template #runtimeTooltip>Started: {{task.started_at}}<br/>
            Finished: {{task.finished_at}}<br/>
            Percent: {{task.duration_sec === 0 ? '< ' : ''}}{{task.runningBarWidth | number}}%<br/>
            Total: {{task.duration_sec === 0 ? '< ' : ''}}{{task.totalBarWidth | number}}%</ng-template>

          <div class="inner">
            <div class="prehighlight" [style.width.%]="task.preBarWidth"></div>
            <div class="waiting highlight" [style.width.%]="task.waitingBeforeBarWidth"></div>
            <div class="highlight" [style.width.%]="task.runningBarWidth"></div>
            <div class="waiting highlight" [style.width.%]="task.waitingAfterBarWidth"></div>
          </div>
        </div>
      </td>

      <td class="text-muted2">
        {{task.duration}}
      </td>
    </tr>
  </table>
</div>